<template>
	<view class="page">
		<!-- 搜索框 -->
	<!-- 	<view class="search-warp">
			<view class="search-input">
				<view class="search-input-value">
					<view class="search">
						<image src="https://www.innovationgloble.com/wxs/img/wx/kcxcx/img/export/search.png"></image>
					</view>
					<input confirm-type="search" @confirm="inputLink()" v-model.trim="searchValue" placeholder-style="color:#A3A3A3;font-size:28upx;"
					 placeholder-class="search-placehoder" placeholder="请输入关键词" type="text" :hold-keyboard='true'>
					<image @click.stop="handleClearValue" v-show="isShowDeleate" class="delete" src="https://www.innovationgloble.com/wxs/img/wx/kcxcx/img/search/deleate.png"></image>
				</view>
				<view @click="inputLink()" class="search-text">
					搜索
				</view>
				
			</view>
			
		</view> -->
		<Topsearch :searchKeyWord="searchValue"  :showFocus="showFocus" 
		placeHoder="搜索联系人"  @searchEvent="inputLink" @searchClear='inputLink' :showCate='false'/>
		<view v-for="(item,index) in currentData" :key="index">
			<view class="chat-item" @click="goChat(item)">
				<image class="avatar" :src="item.photo" />
				<view class="user-info">
					<view class="name-box">
						<view class="name">{{item.name}}</view>
						<view v-if="item.identity" class="identity">
							{{handleComma(item.identity)}}
						</view>
					</view>
					<view class="content">
						<!-- {{displayLastMsg(item.imMessage.content)}} -->
					</view>
					<!-- 状态  退款 付款 结束 -->
					<view v-if="statusTips(item)" :class="{'orderStatus-active':statusTips(item)==='进行中','orderStatus':statusTips(item)==='已结束','orderStatus-to-paid':statusTips(item)==='待付款'}">
						{{statusTips(item)}}
					</view>
				</view>
				<view class="bot-line" />
			</view>
		</view>

		<view v-if="!hasLogin" class="nodata">
			<image class="img" src="https://www.innovationgloble.com/wxs/img/wx/weidenglu.png" />
			<view class="tip">
				您还没有登录，请登录后查看消息
			</view>
			<view class="btn" @click="goLogin">
				登录
			</view>
		</view>

		<view v-else-if="total===0" class="no-data">
			<image src="https://www.innovationgloble.com/wxs/img/wx/no-data.png" mode="aspectFit"></image>
			<view class="no-data-text">暂无付费咨询</view>
		</view>
	</view>
</template>

<script>
	import {
		fullpath
	} from '@/utils';

	import {
		chat_time
	} from '@/utils/time.js';
import Topsearch from '@/components/top-search-tab.vue'
import { permissionJudge } from "@/utils/authority.js" //权限信息校验
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		components:{Topsearch},
		data() {
			return {
				showFocus:false,
				hasLogin: false,
				chatList: ['no-data'], //默认不为空
				isShowDeleate: false,
				searchValue: '',
				currentData: [],
				total:-1
			}
		},
		onShow() {
			//检测登录状态
			this.checkLogin();
		},
		watch: {
			//监听输入框值
			searchValue(val) {
				if (val === '') {
					let currentData = this.chatList
					this.currentData = currentData;
					this.total = currentData.length
					this.isShowDeleate = false
				} else {
					this.isShowDeleate = true
				}
			}
		},
		computed: {
			...mapGetters('chatStore', ['histChatList']),
			...mapState('userStore', ['userInfo']),
			statusTips() {
				return item => {
					if (item) {
						const {
							state1,
							state2,
							state3
						} = item;
						if (parseInt(state1) > 0) {
							return '进行中';
						} else if (parseInt(state2) > 0) {
							return '待付款';
						} else {
							return '已结束';
						}
					}
					return null;
				}
			},
			displayLastMsg() {
				return msg => {
					if (typeof(msg) === 'string') {
						if (msg.indexOf('<img') !== -1) {
							return '图片'
						}
						return msg;
					}
					return '未知类型';
				}
			}
		},
		methods: {
			...mapMutations('chatStore', ['setCurrentPerson']),
			...mapActions('chatStore', ['get_chat_contact_list']),
			//删除第一位为逗号
			handleComma(val) {
				if (val && val.indexOf(',') === 0) {
					return val.substr(1)
				} else {
					return val
				}
			},
			handleClearValue() {
				this.searchValue = '';
				let currentData = this.chatList
				this.currentData = currentData;
				this.total = currentData.length
			},
			//匹配联系人
			inputLink(v) {
				console.log(v)
				this.searchValue = v.keyWord
				if (this.searchValue === '') {
					this.currentData = this.chatList;
					return false
				}
				let hisData = this.chatList
				let currentData = hisData.filter((item, index) => {
					if (item.name.includes(this.searchValue)) {
						return true
					}
				})
				this.currentData = currentData;
				this.total = currentData.length
			},
			goEnters(item) {
				uni.navigateTo({
					url: item.page
				})
			},
			goLogin() {
				uni.navigateTo({
					url: '/pagesA/login/login'
				})
			},
			loadChatList() {
				// 专家 对话入口列表
				this.$request.get({
					url: 'expertOrder/selectList',
					data: {},
				}).then(map => {
					let oalist = map.olist;
					let oalist1 = oalist.concat(map.alist);
					this.chatList = oalist1
					this.currentData = this.chatList;
					this.total =this.currentData.length
					this.currentData.sort(function(a, b) {
						return b.state1 - a.state1
					})
					for (let k of this.currentData) {
						if (!k.name) {
							k.name = k.phone.substring(0, 3) + "****" + k.phone.substring(7, k.phone.length)
						}
					}
				}, res => {});
			},
			checkLogin() {
				try {
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo) {
						// 获取历史联系人
						this.loadChatList();
						//连接 聊天服务
						this.hasLogin = true;
						this.checkConnectWS();
						this.setChatLogin(true);
						this.setUserInfo(userInfo);
					} else {
						this.hasLogin = false;
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			checkConnectWS() {
				getApp().connectWS();
			},
			goChat(item) {
				if(!permissionJudge('expert:message:save')){
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
					return false
				}
				const chatLogin = getApp().globalData.chatLogin;
				const {
					state1,
					state2,
					state3
				} = item;
				const finished = parseInt(state1) === 0;

				if (chatLogin) {

					const userInfo = uni.getStorageSync('userInfo');
					let expertId = item.expert_id;
					let userId = item.expert_user_info_id;
					if (expertId == undefined) {
						uni.navigateTo({
							url: `/pagesA/chat-contactlist/fee-chat?expertId=${userInfo.userId}&userId=${item.user_info_id}&finished=${finished}&type=1&identity=${item.identity}`
						});
					} else {
						uni.navigateTo({
							url: `/pagesA/chat-contactlist/fee-chat?expertId=${item.expert_id}&userId=${item.expert_user_info_id}&finished=${finished}&&type=0&identity=${item.identity}`
						});
					}
				}
			},
			chatTime(time) {
				return chat_time(time);
			}
		},
		onPullDownRefresh() {
			this.loadChatList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style scoped lang="less">
	.page {
		width: 100%;
		min-height: 100vh;
		background-color: #F5F5F5;

		.search-warp {
			padding: 18upx 32upx 30upx 32upx;
			background-color: #FFFFFF;

			.search-input {
				display: flex;
				height: 78upx;

				.search-input-value {
					flex: 1;
					height: 78upx;
					background: #F5F5F5;
					border-radius: 6upx;
					position: relative;

					.search {
						width: 32upx;
						height: 34upx;
						position: absolute;
						left: 20upx;
						top: 48%;
						transform: translateY(-50%);
						z-index: 999;

						image {
							width: 32upx;
							height: 34upx;
						}
					}

					.delete {
						width: 28upx;
						height: 28upx;
						position: absolute;
						right: 20upx;
						top: 50%;
						transform: translateY(-50%);
						z-index: 999;
					}

					input {
						height: 78upx;
						border-radius: 6upx;
						font-size: 28upx;
						padding-left: 72upx;
					}
				}

				.search-text {
					width: 88upx;
					height: 78upx;
					line-height: 78upx;
					text-align: right;
					font-size: 28upx;
					font-weight: 400;
					color: #486B9D;
				}
			}
		}

		.search-box-wrapper {
			display: flex;
			flex-direction: row;
			align-items: center;

			.input-box {
				display: flex;
				flex-direction: row;
				align-items: center;
				flex: 1;
				border-radius: 8upx;
				box-sizing: border-box;
				background-color: #F5F5F5;
				position: relative;
				margin-bottom: 22upx;
				overflow: hidden;
				margin: 20upx 32upx;
				padding: 0 20upx;
				box-sizing: border-box;

				.uni-input {
					font-size: 28upx;
					background-color: #F5F5F5;
					height: 75upx;
				}

				.search-icon {
					width: 32upx;
					height: 32upx;
				}
			}
		}

		.quick-enters {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 31px 15px 23px 15px;
			margin: 0 10px;
			border-bottom: 1px solid #F9F9F9;

			.quick-item {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.quick-item-desc {
				margin-top: 16upx;
				font-size: 24upx;
				color: #CCCCCC;
			}

			.quick-item-title {
				margin-top: 20upx;
				font-size: 28upx;
				color: rgba(51, 51, 51, 1);
				font-weight: 700;
			}

			.quick-item-image {
				width: 98upx;
				height: 98upx;
			}
		}

		.no-data {
			display: flex;
			flex: 1;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
			padding-bottom: 300upx;
			flex-flow: column;

			image {
				width: 240upx;
				height: 166upx;
			}

			.no-data-text {
				color: #666666;
				font-size: 26rpx;
				margin: 30rpx 0;
			}
		}

		.nodata {
			display: flex;
			min-height: 100vh;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			background-color: #FFFFFF;

			.tip {
				color: #666666;
				font-size: 26upx;
				margin: 30upx 0;
			}

			.img {
				object-fit: contain;
				height: 288upx;
				width: 374upx;
			}

			.btn {
				width: 145upx;
				height: 69upx;
				background: rgba(42, 125, 250, 1);
				border-radius: 4upx;
				text-align: center;
				line-height: 69upx;
				color: #fff;
			}
		}

	}

	.chat-item {
		width: 100%;
		height: 144upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;

		position: relative;
	}

	.user-info {
		flex: 1;
		position: relative;

		.orderStatus {
			position: absolute;
			right: 20upx;
			top: 0upx;
			padding: 2upx 8upx;
			box-sizing: border-box;
			font-size: 24upx;
			background-color: #F7F7F7;
			color: #C5C4C4;
			border-radius: 6upx;
		}

		.orderStatus-active {
			position: absolute;
			right: 20upx;
			top: 0upx;
			color: #196DEC;
			padding: 2upx 8upx;
			box-sizing: border-box;
			font-size: 24upx;
			background-color: #F3F7FF;
			border-radius: 6px;
		}

		.orderStatus-to-paid {
			position: absolute;
			right: 20upx;
			top: 0upx;
			color: #DE5A02;
			padding: 2upx 8upx;
			box-sizing: border-box;
			font-size: 24upx;
			background-color: #F9F5F2;
			border-radius: 6px;
		}

		.name-box {
			display: flex;
			flex-direction: row;
			align-items: center;

			.name {
				font-size: 30upx;
				color: #444444;
				font-weight: bold;
			}

			.identity {
				margin-left: 10upx;
				font-size: 22upx;
				color: #C99301;
				border: solid 1upx #C99301;
				padding: 1upx 8upx;


				opacity: 0.4;
				border: 2upx solid rgba(217, 170, 39, 1);
			}
		}

	}

	.bot-line {
		position: absolute;
		bottom: 0;
		height: 2upx;
		background-color: #F5F5F5;
		left: 124upx;
		right: 0upx;
	}

	.content {
		font-size: 26upx;
		color: #888787;
		word-break: break-word; //换行模式
		overflow: hidden;
		text-overflow: ellipsis; //修剪文字
		display: -webkit-box;
		-webkit-line-clamp: 1; //此处为上限行数
		-webkit-box-orient: vertical;
	}

	.avatar {
		width: 84upx;
		height: 84upx;
		border-radius: 50%;
		background-color: #F9F9F9;
		margin-right: 20upx;
	}
</style>
